<template>
	<view>
		<view class=" Carouselmap">
			<swiper style="height: 335px;" indicator-color="rgba(255,255,255,.5)" indicator-active-color="#fff" :indicator-dots="indicatorDots"
			 :autoplay="autoplay" :interval="interval" :duration="duration">
				<!-- 轮播图1 -->
				<swiper-item>
					<view class="Carouselmap-title">预算</view>
					<u-row gutter="16">
						<u-col span="6" v-for="(item,index) in dataList" :key="index">
							<view class="Carouselmap-flex">
								<view class="Carouselmap-name">{{item.title}}</view>
								<view class="Carouselmap-center">
									<text class="Carouselmap-text">{{item.number}}</text>
									<text class="Carouselmap-Unit">{{item.unit}}</text>
								</view>
							</view>
						</u-col>
					</u-row>
				</swiper-item>
			</swiper>
		</view>

		<!-- 分隔线 -->
		<view class="dividingLine"></view>

		<!-- 图标 -->
		<u-row gutter="16">
			<u-col span="3">
				<view class="icon-flex" @click="budget">
					<image class="icon-img" src="../../static/index/budget.png" mode=""></image>
					<view class="icon-text">预算</view>
				</view>
			</u-col>

			<u-col span="3">
				<view class="icon-flex">
					<image class="icon-img" src="../../static/index/material.png" mode=""></image>
					<view class="icon-text">物资</view>
				</view>
			</u-col>

			<u-col span="3">
				<view class="icon-flex" @click="equipment">
					<image class="icon-img" src="../../static/index/equipment.png" mode=""></image>
					<view class="icon-text">设备</view>
				</view>
			</u-col>

			<u-col span="3">
				<view class="icon-flex" @click="assets">
					<image class="icon-img" src="../../static/index/assets.png" mode=""></image>
					<view class="icon-text">资产</view>
				</view>
			</u-col>

			<u-col span="3">
				<view class="icon-flex" @click="costControl">
					<image class="icon-img" src="../../static/index/cost.png" mode=""></image>
					<view class="icon-text">成本</view>
				</view>
			</u-col>

			<u-col span="3">
				<view class="icon-flex" @click="achievements">
					<image class="icon-img" src="../../static/index/achievements.png" mode=""></image>
					<view class="icon-text">绩效</view>
				</view>
			</u-col>

			<u-col span="3">
				<view class="icon-flex" @click="aboty">
					<image class="icon-img" src="../../static/index/repair.png" mode=""></image>
					<view class="icon-text">维修</view>
				</view>
			</u-col>

			<u-col span="3">
				<view class="icon-flex" @click="finance">
					<image class="icon-img" src="../../static/index/finance.png" mode=""></image>
					<view class="icon-text">人事</view>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: false, // 是否自动切换
				interval: 2000,
				duration: 500,
				cloneHeight: 0,
				dataList: [{
						title: '待审核申请单',
						number: '8',
						unit: '项'
					},
					{
						title: '待审核报账单',
						number: '8',
						unit: '项'
					},
					{
						title: '已支付报账单',
						number: '66',
						unit: '项'
					},
					{
						title: '全院剩余额度',
						number: '6.34',
						unit: '千万'
					},
					{
						title: '本科室剩余额度',
						number: '2.33',
						unit: '百万'
					},
					{
						title: '待审核申请单',
						number: '8',
						unit: '项'
					},
				]
			}
		},
		onShow() {},
		methods: {
			// 预算
			budget() {
				uni.navigateTo({
					url: '../budget/budget'
				})
			},
			maintenance() {
				uni.navigateTo({
					url: '../Maintenance/Maintenance'
				})
			},
			// 设备
			equipment() {
				uni.navigateTo({
					url: '/pages/eam/Equipment/Equipment'
				})
			},
			// 资产
			assets() {
				uni.navigateTo({
					url: '/pages/eam/Assets/Assets'
				})
			},
			// 维修
			aboty() {
				uni.navigateTo({
					url: '/pages/Workorder/homepage'
				})
			},
			// 人事
			finance() {
				uni.navigateTo({
					url: '/pages/Finance/Finance'
				})
			},
			// budget() {
			// 	uni.navigateTo({
			// 		url: '/pages/budgetCost/homeBudget'
			// 	});
			// },
			costControl() {
				uni.navigateTo({
					url: '/pages/costControl/CostHome'
				});
			},
			achievements() {
				uni.navigateTo({
					url: '/pages/achievements/performanceHome'
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 轮播图
	.Carouselmap {
		padding: 40rpx 20rpx 0 0;
		background-color: #00A2DE;

		.Carouselmap-title {
			color: #fff;
			font-size: 20px;
			padding: 30rpx 20rpx 20rpx;
		}

		.Carouselmap-flex {
			background-color: #fff;
			border-radius: 10px;
			margin-left: 16rpx;
			margin-bottom: 30rpx;
			padding: 20rpx;

			.Carouselmap-name {
				padding: 0 8px;
				color: #666;
				font-size: 15px;
				border-left: 2px solid #00A2DE;
				white-space: nowrap; //文字不换行
				overflow: hidden; //超出隐藏
				text-overflow: ellipsis; //省略号显示
			}

			.Carouselmap-center {
				padding: 20rpx 0 4rpx;
				text-align: center;

				.Carouselmap-text {
					font-size: 24px;
					font-weight: 700;
					padding-right: 5rpx;
				}

				.Carouselmap-Unit {
					font-size: 13px;
					color: #666;
				}
			}
		}
	}

	// 图标

	.icon-flex {
		padding: 16rpx;
		margin-top: 10rpx;
		text-align: center;

		.icon-img {
			width: 50px;
			height: 50px;
		}

		.icon-text {
			font-size: 14px;
			padding: 10rpx 0;
		}
	}
</style>
